<template>
    <view class="book-recommend">
        <view class="commone-title">书单推荐</view>
        <view class="book-wrapper">
            <view class="recommend-wrapper" :style="{'width': width}">
                <view class="recommend-item" v-for="item in recommondData" :key="item.itemsId" @tap="watchBook(item)">
                    <image :src="item.itemsHead"/>
                </view>
                <view class="recommend-item" @tap="watchMore">
                    <image src="../../static/imgs/more.png"/>
                    <text class="more-txt">查看更多书单</text>
                    <text class="icon-arrow-right icon-btn"></text>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    import service from "@/service";
    export default {
        name: "bookRecommend",
        data() {
            return {
                recommondData: [],
                width: '',
                isMore: false
            }
        },
        methods: {
            // getData(){
            //
            // },
            getBookList () {
                uni.showLoading({
                    title: '加载中',
                });
                service.homeService.getBookList({
                    data: {
                        page: 1,
                        limit: 4
                    },
                    success: res => {
                        uni.hideLoading();
                        if (res.code === 200) {
                            this.recommondData = res.result.data || [];
                            this.width = (this.recommondData.length+1) * 290 + 'rpx';
                        } else {
                            uni.showToast({
                                title: `${res.resultMsg}`,
                                duration: 2500,
                                icon: 'none'
                            });
                        }
                    },
                    fail: ()=>{
                        uni.hideLoading();
                    },
                    complete: () => {
                    },
                });
            },
            watchBook(item){
                uni.navigateTo({
                    url: `./bookDetail/index?id=${item.itemsId}`
                });
            },
            watchMore(){
                uni.navigateTo({
                    url: `./bookRecommend/index`
                });
            }
        },
        mounted() {
            this.getBookList();
        }
    }
</script>

<style scoped lang="scss">
    .book-recommend{
        margin-top:40rpx;
        margin-left: 30rpx;
        .book-wrapper{
            width: 100%;
            overflow-y: hidden;
            overflow-x: auto;
        }
        .recommend-wrapper{
            position: relative;
            margin-top: 20rpx;
            .recommend-item{
                width: 270rpx;
                height: 196rpx;
                margin-right: 20rpx;
                float: left;
                position: relative;
                image{
                    width: 100%;
                    height: 100%;
                }
                .more-txt{
                    color: #FFFFFF;
                    position: absolute;
                    left: 20rpx;
                    top: 18rpx;
                }
                .icon-btn{
                    position: absolute;
                    left: 20rpx;
                    top: 66rpx;
                    background: #fff;
                    color: #4265EB;
                    width: 30rpx;
                    height: 30rpx;
                    text-align: center;
                    line-height: 30rpx;
                    font-size: 20rpx;
                    border-radius: 50%;
                }
            }
        }
    }
</style>